---
metaTitle: Use cases
metaDescription: How to use Radix Colors.
---

# Understanding the scale

<Description>
	Learn which scale step is the most appropriate for each use case.
</Description>

## Use cases

There are 12 steps in each scale. Each step was designed for at least one specific use case.

This table is a simple overview of the most common use case for each step. However, there are many exceptions and caveats to factor in, which are covered in further detail below.

<UseCasesTable />

## Steps 1–2: Backgrounds

<ColorScale01 />

Steps `1` and `2` are designed for app backgrounds and subtle component backgrounds. You can use them interchangeably, depending on the vibe you're going for.

Appropriate applications include:

- Main app background
- Striped table background
- Code block background
- Card background
- Sidebar background
- Canvas area background

<Note>
	You may want to use white for your app background in light mode, and Step `1`
	or `2` from a gray or coloured scale in dark mode. In this case, set up a
	[mutable alias](/colors/docs/overview/aliasing#mutable-aliases) for `AppBg`
	and map it to a different color for each color mode.
</Note>

## Steps 3–5: Component backgrounds

<ColorScale02 />

Steps `3`, `4`, and `5` are designed for UI component backgrounds.

- Step `3` is for normal states.
- Step `4` is for hover states.
- Step `5` is for pressed or selected states.

{

<Flex wrap="wrap" gap="5" my="5">
  <IconButton variant="soft" color="gray"><PlusIcon /></IconButton>
  <IconButton variant="soft" color="pink"><PlusIcon /></IconButton>

{' '}

<Flex direction="column" maxWidth="max-content">
	<MenuItemButton color="gray" data-state="active">
		Menu item
	</MenuItemButton>
	<MenuItemButton color="gray">Second menu item</MenuItemButton>
	<MenuItemButton color="gray">Third menu item</MenuItemButton>
</Flex>

  <Flex direction="column" maxWidth="max-content">
    <MenuItemButton color="pink" data-state="active">
      Menu item
    </MenuItemButton>
    <MenuItemButton color="pink">
      Second menu item
    </MenuItemButton>
    <MenuItemButton color="pink">
      Third menu item
    </MenuItemButton>
  </Flex>
</Flex>
}

If your component has a transparent background in its default state, you can use Step `3` for its hover state.

{

<Flex wrap="wrap" gap="5" my="5">
	<IconButton variant="ghost" color="gray">
		<PlusIcon />
	</IconButton>
	<IconButton variant="ghost" color="blue">
		<PlusIcon />
	</IconButton>
	<IconButton variant="ghost" color="red">
		<PlusIcon />
	</IconButton>
</Flex>
}

<Note>
	Steps `11` and `12`—which are designed for text—are guaranteed to Lc 60 and Lc
	90 APCA contrast ratio on top of a step `2` background from the same scale.
</Note>

## Steps 6–8: Borders

<ColorScale03 />

Steps `6`, `7`, and `8` are designed for borders.

- Step `6` is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
- Step `7` is designed for subtle borders on interactive components.
- Step `8` is designed for stronger borders on interactive components and focus rings.

{

<Grid columns="7" gap="3" my="5">
	<Button variant="surface" color="gold">
		Gold
	</Button>
	<Button variant="surface" color="bronze">
		Bronze
	</Button>
	<Button variant="surface" color="brown">
		Brown
	</Button>
	<Button variant="surface" color="yellow">
		Yellow
	</Button>
	<Button variant="surface" color="amber">
		Amber
	</Button>
	<Button variant="surface" color="orange">
		Orange
	</Button>
	<Button variant="surface" color="tomato">
		Tomato
	</Button>
	<Button variant="surface" color="red">
		Red
	</Button>
	<Button variant="surface" color="ruby">
		Ruby
	</Button>
	<Button variant="surface" color="crimson">
		Crimson
	</Button>
	<Button variant="surface" color="pink">
		Pink
	</Button>
	<Button variant="surface" color="plum">
		Plum
	</Button>
	<Button variant="surface" color="purple">
		Purple
	</Button>
	<Button variant="surface" color="violet">
		Violet
	</Button>
	<Button variant="surface" color="iris">
		Iris
	</Button>
	<Button variant="surface" color="indigo">
		Indigo
	</Button>
	<Button variant="surface" color="blue">
		Blue
	</Button>
	<Button variant="surface" color="cyan">
		Cyan
	</Button>
	<Button variant="surface" color="teal">
		Teal
	</Button>
	<Button variant="surface" color="jade">
		Jade
	</Button>
	<Button variant="surface" color="green">
		Green
	</Button>
	<Button variant="surface" color="grass">
		Grass
	</Button>
	<Button variant="surface" color="lime">
		Lime
	</Button>
	<Button variant="surface" color="mint">
		Mint
	</Button>
	<Button variant="surface" color="sky">
		Sky
	</Button>
</Grid>

}

## Steps 9–10: Solid backgrounds

<ColorScale04 />

Steps `9` and `10` are designed for solid backgrounds.

Step `9` has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because `9` is the purest step, it has a wide range of applications:

- Website/App backgrounds
- Website section backgrounds
- Header backgrounds
- Component backgrounds
- Graphics/Logos
- Overlays
- Coloured shadows
- Accent borders

Step `10` is designed for component hover states, where step `9` is the component's normal state background.

<Note>
	Most step 9 colors are designed for white foreground text. `Sky`, `Mint`,
	`Lime`, `Yellow`, and `Amber` are designed for dark foreground text and steps
	`9` and `10`.
</Note>

{

<Grid columns="7" gap="3" my="5">
	<Button variant="solid" color="gold">
		Gold
	</Button>
	<Button variant="solid" color="bronze">
		Bronze
	</Button>
	<Button variant="solid" color="brown">
		Brown
	</Button>
	<Button variant="solid" color="yellow">
		Yellow
	</Button>
	<Button variant="solid" color="amber">
		Amber
	</Button>
	<Button variant="solid" color="orange">
		Orange
	</Button>
	<Button variant="solid" color="tomato">
		Tomato
	</Button>
	<Button variant="solid" color="red">
		Red
	</Button>
	<Button variant="solid" color="ruby">
		Ruby
	</Button>
	<Button variant="solid" color="crimson">
		Crimson
	</Button>
	<Button variant="solid" color="pink">
		Pink
	</Button>
	<Button variant="solid" color="plum">
		Plum
	</Button>
	<Button variant="solid" color="purple">
		Purple
	</Button>
	<Button variant="solid" color="violet">
		Violet
	</Button>
	<Button variant="solid" color="iris">
		Iris
	</Button>
	<Button variant="solid" color="indigo">
		Indigo
	</Button>
	<Button variant="solid" color="blue">
		Blue
	</Button>
	<Button variant="solid" color="cyan">
		Cyan
	</Button>
	<Button variant="solid" color="teal">
		Teal
	</Button>
	<Button variant="solid" color="jade">
		Jade
	</Button>
	<Button variant="solid" color="green">
		Green
	</Button>
	<Button variant="solid" color="grass">
		Grass
	</Button>
	<Button variant="solid" color="lime">
		Lime
	</Button>
	<Button variant="solid" color="mint">
		Mint
	</Button>
	<Button variant="solid" color="sky">
		Sky
	</Button>
</Grid>

}

## Steps 11–12: Text

<ColorScale05 />

Steps `11` and `12` are designed for text.

- Step `11` is designed for low-contrast text.
- Step `12` is designed for high-contrast text.

{

<Flex gap="2" direction="column" my="5">
	<Text size="3" style={{ color: "var(--pink-11)" }}>
		This text is Pink 11
	</Text>
	<Text size="3" style={{ color: "var(--slate-11)" }}>
		This text is Slate 11
	</Text>
	<Text size="3" style={{ color: "var(--gray-11)" }}>
		This text is Gray 11
	</Text>
	<Text size="3" weight="bold" style={{ color: "var(--pink-12)" }}>
		This text is Pink 12
	</Text>
	<Text size="3" weight="bold" style={{ color: "var(--slate-12)" }}>
		This text is Slate 12
	</Text>
	<Text size="3" weight="bold" style={{ color: "var(--gray-12)" }}>
		This text is Gray 12
	</Text>
</Flex>

}
